
import React, { LazyExoticComponent } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import LoadableComponent from '@loadable/component'; //这个跟react-loader是干一样的事情 加载import("./xx")导入的组件
import Loadable from 'react-loadable'; //这个跟@loadable/component一样的  只是当前组件github不更新了
import routerConfig from './config/RouterConfig'
import './App.css';
// //https://juejin.cn/post/6844904175025782792
export const LazyImportComponent = (props: {
  lazyChildren: LazyExoticComponent<() => JSX.Element>;
}) => {
  console.log("bbb",props)
  return (
    <React.Suspense fallback={<></>}>
      <props.lazyChildren />
    </React.Suspense>
  );
};

const getRoutes = (routerArr: typeof routerConfig) => {
  return (
    <React.Fragment>
      {routerArr.map((val) => {
        const { path, element, children } = val
        //这里用react-loader是很久没更新了 不维护了 所以不用
        // const Component = Loadable({
        //   loader: element,
        //   loading: () => <></>,
        // });
        //这个是react官方推荐使用这个
        //const Component = LoadableComponent(element)
        //https://cloud.tencent.com/developer/article/2098078
        //https://cloud.tencent.com/developer/article/2041920?from=article.detail.2098078
        const Component = React.lazy(element);
        return (
          <Route
            key={path}
            path={path}
            element={<LazyImportComponent lazyChildren={Component} />}
            children={children ? getRoutes(children) : null}
          />
        );
      })}
    </React.Fragment>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {getRoutes(routerConfig)}
      </Routes>
    </BrowserRouter>
  );
}

export default App;


//https://cloud.tencent.com/developer/article/2098078


